---
title: Dialog
description: A popup that opens on top of the entire page.

links:
  doc: https://base-ui.com/react/components/dialog#api-reference
---

<ComponentPreview name="p-dialog-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/dialog
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui-components/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dialog" title="components/ui/dialog.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  Dialog,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
```

```tsx
<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>
```

## Examples

### Open from a Menu

<ComponentPreview name="p-dialog-2" />

### Nested Dialogs

<ComponentPreview name="p-dialog-3" />

### Close Confirmation

<ComponentPreview name="p-dialog-4" />

## Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with **coss ui** quickly.

### Quick Checklist

- Replace `asChild` → `render` on `DialogTrigger` and closing buttons
- Prefer `DialogPopup`; `DialogContent` remains for legacy
- If you used `asChild` on any other parts, switch to the `render` prop

### Comparison Example

<span data-lib="radix-ui">
```tsx title="shadcn/ui"
// [!code word:asChild]
<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Show Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>
```
</span>

<span data-lib="base-ui">
```tsx title="coss ui"
// [!code word:render]
<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Show Dialog
  </DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>
```
</span>
